revision:
is an SVG basic shape, used to draw circles based on a center point and a radius.
attributes: cx, cy, r, pathlength
starting with SVG2, cx, cy, and r are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 100 60">
<circle cx="50" cy="30" r="25"/>
</svg>
used to create ellipses based on a center coordinate, and both their x and y radius.
attributes: cx, cy, rx, ry, pathlength
starting with SVG2, cx, cy, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg height="180" width="500">
<ellipse cx="200" cy="80" rx="150" ry="70" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
includes images inside SVG documents. It can display raster image files or other SVG files.
The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.
SVG files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be interactive.
To include dynamic SVG elements, try <use> with an external URL.
To include SVG files and run scripts inside them, try <object> inside of <foreignObject>.
attributes: x, y, width, height, href, xlink:htrf, preserveAspectRatio, crossorigin
codes:
<svg width="200" height="200">
<image href="smiley.png" height="200" width="200"/>
</svg>
used to create a line connecting two points.
attributes: x1, x2, y1, y2, pathlength
codes:
<svg viewBox="0 0 100 60">
<line x1="0" y1="60" x2="90" y2="10" stroke="blue"/>
</svg>
the <path> element is used to define a path. It is the generic element to define a shape. All the basic shapes can be created with a path element.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
attributes: d, pathlength
codes:
<svg viewBox="0 0 100 90">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"/>
</svg>
defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polygon with the default fill -->
<polygon points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polygon shape with stroke and no fill -->
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polyline with the default fill -->
<polyline points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polyline shape with stroke and no fill -->
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="darkgreen" />
</svg>
draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
attributes: x, y, width, height, rx, ry, pathlength
starting with SVG2, x, y, width, height, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 220 100">
<!-- Simple rectangle -->
<rect width="100" height="100"/>
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.
If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.
attributes: x, y, dx, dy, rotate, lengthAdjust, textLength
codes:
<svg viewBox="0 0 240 80">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
takes nodes from within the SVG document, and duplicates them somewhere else.
Most attributes on "use" do not override those already on the element referenced by use. Only the attributes x, y, width, height and href on the use element will override those set on the referenced element. However, any other attributes not set on the referenced element will be applied to the use element.
attributes: href, xlink:href, x, y, width, height
codes:
<svg viewBox="0 0 30 10">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
<use href="#myCircle" x="10" fill="red"/>
<use href="#myCircle" x="20" fill="white" stroke="red"/>
<!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
-->
</svg>